<template>
    <h1>判断奇数偶数</h1>

    <!-- <h4>num 的值为 {{ num }}, 它的值为 {{ msg }} </h4> -->
    <h4>num 的值为 {{ num }}, 它的值为 {{ comMsg }}</h4>

    <button @click="setNum">修改 num 的值</button>
</template>

<script>
export default {
    data() {
        return {
            num: 1,
            msg: "奇数",
        };
    },
    methods: {
        setNum() {
            this.num = Math.floor(Math.random() * 2); // 0~1 之间的随机整数
            console.log("修改num的值为: ", this.num);

            // this.setMsg()
        },
        setMsg() {
            console.log("setMsg 执行~~~");
            this.msg = this.num ? "奇数" : "偶数";
        },
    },
    // 专门存储我们 VUE 的计算属性
    computed: {
        comMsg() {
            /**
             *  计算属性只有内部的 响应式数据发生变化的时候, 才会重新执行
            */
            console.log('计算属性, 重新运算')
            return this.num ? "奇数" : "偶数"
        },
    },
};
</script>

<style></style>
